Build interactive homepage features: carousel, promo accordion, tire finder#10
Merged
Conversation
Three blocks match the live continentaltire.com behavior. carousel: a new block for the homepage feature area. One slide at a time, 7 slides, prev/next arrows, dot indicators and an "N of 7" counter. It replaces the static TerrainContact feature. promo-bar: the slim bar is now a disclosure. The toggle expands a rebate detail panel. Escape and a second click collapse it. perfect-fit: the three "Find your perfect fit" items open a tire-finder modal with By Vehicle, By Tire Size and By Plate tabs. Each tab is a sample search form. The modal traps focus, closes on overlay click and Escape, and returns focus to the trigger. Live-tested at 1440px on a local aem up server: carousel navigation and wrap-around, promo expand and collapse, modal open on the right tab, tab switch, and close all work. eslint and stylelint pass.
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
Commits
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fix #9
Build the three interactive homepage features from the live continentaltire.com. Vanilla JS blocks, no dependencies.
Test URLs:
The After link is the branch preview, since the feature couples this branch's code with new homepage content. Production gets it when the content is published after merge.
carousel: a new block for the feature area. One slide is visible, 7 slides total, with prev/next arrows, dot indicators, an "N of 7" counter, and wrap-around. It replaces the static TerrainContact columns block.
promo-bar: the slim bar is now a disclosure. The toggle expands a rebate detail panel. Escape and a second click collapse it.
perfect-fit: the three items open a tire-finder modal with By Vehicle, By Tire Size and By Plate tabs. Each tab is a sample search form. The modal traps focus, closes on overlay click and Escape, and returns focus to the trigger.
The homepage content in DA now authors the 7 carousel slides and the promo disclosure rows.
Testing: live-tested at 1440px on a local aem up server. Carousel navigation and wrap-around, promo expand and collapse, modal open on the matching tab, tab switch, submit does not navigate, and close all work. eslint and stylelint pass.